import {Component} from "react";
import React from "react";
import axios from "axios";
import "./ShopModify.css"
import {NavLink} from "react-router-dom";
export default class ShopModify extends Component{
    state = {
        title_item: ["商品ID", "商品名称", "商品价格", "商品数量","操作"],
        proxy: "http://localhost:3000",
        pages: {
            page: 1,
            pageSize: 10,
            pageMax: 0,
            prePage: 0,
            nextPage: 0,
            isFirstPage: true,
            isLastPage: false,

        },
        photo: null,
        imgUrl:"",
        defaultImg:"",
        navigatePage: [1,2,3,4,5],
        shop: [],
        goods:[],
    }

    goodsNameRef= React.createRef();
    goodsPriceRef= React.createRef();
    goodsNumRef = React.createRef();

    fileRef = React.createRef();
    formRef = React.createRef();

    componentDidMount() {
        this.getGoods()
        console.log("挂载后shop_modify中的state=",this.state)
    }
    getGoods = ()=>{
        axios.request({
            url:"/selectGoods",
            params:{
                belongId:2
            }
        }).then((response)=>{
            const {data} = response
            this.setState({goods:data})
            console.log("response.data",data)
            console.log("getGoods后shop_modify中的state=",this.state)
            this.inputForm(this.state.goods[1])
            this.getImage(this.state.goods[1].goodsImgId)
        })
    }

    fileChange = (event)=>{
        console.log("fileChange=",event.target.files[0])
        const formdata = new FormData()
        formdata.append("file",event.target.files[0])
        console.log(formdata)
        this.setState({formdata})
    }
    getImage = (goodsImgId)=>{
        axios.request({
            url:"/getPhoto",
            params:{goodsImgId:goodsImgId},
            responseType: "blob",
        }).then(
            (response)=>{
                const {data} = response
                this.createMiniQrcode(data)
                this.setState({photo:data})
            }
        )
    }
    updataImage = () => {
        console.log("发送Image请求")
        console.log("state中formdata=",this.state.formdata)
        axios.request({
            url:"/updataImage",
            method:"post",
            data:this.state.formdata,
            params:{goodsImgId:this.state.updataImgId},
            headers: {'Content-Type': 'multipart/form-data'},
            responseType: "blob"
        }).then(
            (response)=>{
                const {updataImgId} = this.state
                this.getImage(updataImgId)
            }
        )
    }

    inputForm = (goodsObj)=>{
        this.goodsNameRef.current.value = goodsObj.productName
        this.goodsPriceRef.current.value = goodsObj.goodsPrice
        this.goodsNumRef.current.value = goodsObj.goodsNume
        this.setState({updataImgId:goodsObj.goodsImgId})
    }

    createMiniQrcode = (blob)=> {
        let img = document.createElement('img')
        img.onload = function (e) {
            // 元素的onload 事件触发后将销毁URL对象, 释放内存。
            window.URL.revokeObjectURL(img.src)
        }
        // 浏览器允许使用URL.createObjectURL()方法，针对 Blob 对象生成一个临时 URL。
        // 这个 URL 以blob://开头,表明对应一个 Blob 对象。
        img.src = window.URL.createObjectURL(blob)
        // document.querySelector('.imgQrCode').appendChild(img)
        this.setState({imgUrl: img.src})
        console.log("img.src = ",img.src)
    }

    render() {
        return(
            <div className="main_content"> 
                <span className="title">
                店铺详情
                </span>

                <div className="modify_box">
                    <div>
                        <span className="modify_box_span">商品名称</span>
                        <input type="text" className="input_text" ref={this.goodsNameRef}/>
                    </div>
                    <div>
                        <span className="modify_box_span">商品价格</span>
                        <input type="text" className="input_text" ref={this.goodsPriceRef}/>
                    </div>
                    <div>
                        <span className="modify_box_span">商品数量</span>
                        <input type="text" className="input_text" style={{width:"120px"}} ref={this.goodsNumRef} />
                    </div>
                    <div>
                        <span className="modify_box_span">商品图片</span>
                        <div className="shop_image_box">
                            <div className="shop_image_div">
                                <img src={`${this.state.imgUrl}`} width="128px" height="128px" alt="选择添加" />
                            </div>
                        </div>
                        <input type="file" name="file" className="input_file" onChange={this.fileChange} /><br/>
                        <button onClick={()=>{this.updataImage()}} className="modify_btn btn_position">修改图片</button>
                    </div>
                    {/*<input type="file" name="file" onChange={this.fileChange} /><br/>*/}
                    {/*<button onClick={()=>{this.setImage()}}>插入图片</button>*/}
                    {/*<button onClick={()=>{this.getImage()}}>获得图片</button>*/}
                    {/*<button onClick={()=>{this.createMiniQrcode(this.state.photo)}} >放上图片</button>*/}

                </div>

                <div className="List_box">
                    <div className="List_title">
                        {
                            this.state.title_item.map(
                                (titleObj, index) => {
                                    return <span className="List_title_item" key={index}>{titleObj}</span>
                                }
                            )
                        }
                    </div>

                    {
                        this.state.goods.map((goodsObj) => {
                            const shopId = goodsObj.shopId
                            return (
                                <div className="List_data" key={goodsObj.productId}>
                                    <span className="List_data_item">{goodsObj.productId}</span>
                                    <span className="List_data_item">{goodsObj.productName}</span>
                                    <span className="List_data_item">{goodsObj.goodsPrice}</span>
                                    <span className="List_data_item">{goodsObj.goodsNum}</span>
                                    <span className="List_data_item">
                                        <button className="List_button" onClick={()=>{this.inputForm(goodsObj);this.getImage(goodsObj.goodsImgId)}}>详情</button>
                                    </span>

                                </div>
                            )
                        })
                    }

                    <div className="pages_parent">
                        <nav aria-label="Page navigation ">
                            <ul className="pagination pagination-lg">
                                <li>
                                    <a href="#" aria-label="Previous" onClick={() => {
                                        this.changePage(-1)
                                    }} style={{pointerEvents: this.state.pages.isFirstPage ? "none" : "auto"}}>
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#" onClick={() => {
                                    this.changePage(this.state.navigatePage[0])
                                }}
                                       style={{pointerEvents: this.state.pages.isFirstPage ? "none" : "auto"}}>    {this.state.navigatePage[0]}</a>
                                </li>
                                <li><a href="#" onClick={() => {
                                    this.changePage(this.state.navigatePage[1])
                                }}>    {this.state.navigatePage[1]}</a></li>
                                <li><a href="#" onClick={() => {
                                    this.changePage(this.state.navigatePage[2])
                                }}>    {this.state.navigatePage[2]}</a></li>
                                <li><a href="#" onClick={() => {
                                    this.changePage(this.state.navigatePage[3])
                                }}>    {this.state.navigatePage[3]}</a></li>
                                <li><a href="#" onClick={() => {
                                    this.changePage(this.state.navigatePage[4])
                                }}
                                       style={{pointerEvents: this.state.pages.isLastPage ? "none" : "auto"}}>    {this.state.navigatePage[4]}</a>
                                </li>
                                <li>
                                    <a href="#" aria-label="Next" onClick={() => {
                                        this.changePage(-3)
                                    }} style={{pointerEvents: this.state.pages.isLastPage ? "none" : "auto"}}>
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>


            </div>
        )
    }
}